<template>
	<view class="content">
		<view>
			<u-skeleton rows="6" :loading="dataLoading">
				<uni-swipe-action>
					<uni-swipe-action-item class="swipe_item" v-for="(item,index) in cartList" :key="index"
						:right-options="options2" @click="swipeClick($event, item.id,item.goodsId,item.storeId)">
						<view class="card" @click="toDetails(item.goodsId,item.number)">
							<view style="display: flex;">
								<view style="margin-right: 10px;">
									<image style="width: 120px; height: 120px;border-radius: 8px;" :src="item.image">
									</image>
								</view>
								<view>
									<text class="grid-text_goods">{{item.goodsName}}</text>
									<view style="display: flex;margin: 10px 0 10px 0">
										<view>
											<text style="color: #909399; font-size: 12px">价格: </text>
											<text style="color: #909399; font-size: 12px">{{item.price}}</text>
										</view>
										<view style="margin-left: 10px;">
											<text style="color: #909399; font-size: 12px">数量: </text>
											<text style="color: #909399; font-size: 12px">{{item.number}}</text>
										</view>
									</view>
									<view style="display: flex;">
										<u-icon class="text" size="22" name="rmb" color="#DC143C"></u-icon><text
											style="color: #DC143C; font-size: 15px;font-weight: bold;">{{toFixedOneDecimal(item.totalPrice)}}</text>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</u-skeleton>
		</view>

		<!-- 空状态 -->
		<view v-if="isEmpty">
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>

		<!-- 选择收货地址 -->
		<view>
			<u-popup :duration="500" :safeAreaInsetTop="true" :overlayOpacity="0.3" :round="10" :show="show"
				mode="bottom" @close="close">
				<radio-group @change="radioChange">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
						<label v-for="(item, index) in addressData" :key="index">
							<view style="padding: 10px;display: flex;">
								<view style="margin: 24px 20px 0 10px;">
									<radio :value="item.id" />
								</view>
								<view class="item">
									<view class="top">
										<view class="name">{{ item.receiver }}</view>
										<view class="phone">{{ item.phone }}</view>
										<view class="tag">
											<text v-if="item.status === 1" :class="{red:item.status === 1}">默认</text>
										</view>
									</view>
									<view class="bottom">
										{{item.region}}
									</view>
								</view>
							</view>
						</label>
					</scroll-view>
				</radio-group>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onPullDownRefresh,
		onTabItemTap,
		onShow
	} from "@dcloudio/uni-app";
	import {
		queryCartData,
		deleteCartData
	} from '@/api/cart/index.js';
	import {
		getToken,
		getUserInfo
	} from "@/stores/index.js";
	import {
		queryData
	} from "@/api/address/index.js";

	const token = getToken();
	const user = getUserInfo();
	const cartList = ref([]);
	const isEmpty = ref(false);
	const dataLoading = ref(true);
	onLoad(() => {
		if (token === '') {
			uni.redirectTo({
				url: "/pages/login/login"
			})
		} else {
			getCurrentUserCartData();
		}
	})

	//点击底部导航栏时触发
	onTabItemTap(() => {
		if (token === '') {
			uni.redirectTo({
				url: "/pages/login/login"
			})
		} else {
			getCurrentUserCartData();
		}
	})

	//下拉刷新请求触发
	onPullDownRefresh(() => {
		getCurrentUserCartData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 500);
	})

	//获取当前用户的购物车数据
	const getCurrentUserCartData = () => {
		queryCartData(user.id).then((res) => {
			if (res.code === 200 && res.data !== null) {
				cartList.value = res.data;
				dataLoading.value = false;
			} else {
				isEmpty.value = true;
				dataLoading.value = false;
			}
		})
	}


	const options2 = ref([{
		text: '结算',
		style: {
			backgroundColor: '#3c9cff'
		}
	}, {
		text: '移除',
		style: {
			backgroundColor: '#f56c6c'
		}
	}]);

	//处理购买和移除购物数据方法
	const addressId = ref(null);
	const addressData = ref([]);
	const orderVo = ref({
		cartId: null,
		goodsId: null,
		storeId: null
	})
	const swipeClick = (e, cartId, goodsId, storeId) => {
		let {
			content
		} = e;
		if (content.text === '结算') {
			//先选择收货地址再跳转
			queryData(user.id).then((res) => {
				if (res.code === 200 && res.data !== null) {
					addressData.value = res.data;
					show.value = true;
				} else {
					//用户没有收货地址跳转到地址页面
					uni.showToast({
						title: '请选择收货地址！',
						icon: 'error'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/address/address"
						})
					}, 1500)
				}
				orderVo.value.cartId = cartId;
				orderVo.value.goodsId = goodsId;
				orderVo.value.storeId = storeId;
			})
		}
		if (content.text === '移除') {
			uni.showModal({
				content: '确认移除?',
				success: res => {
					if (res.confirm) {
						//移除请求
						deleteCartData(cartId);
						//重新刷新页面
						uni.reLaunch({
							url: "/pages/cart/cart"
						})
					}
				}
			});
		}
	}

	//跳往购物车商品详情页
	const toDetails = (goodsId, number) => {
		uni.navigateTo({
			url: "/pages/cartDetail/cartDetail?goodsId=" + goodsId + "&number=" + number
		})
	}

	//金额小数点
	function toFixedOneDecimal(num) {
		return parseFloat(num.toFixed(1));
	}

	//选择收货地址
	const show = ref(false);

	const close = () => {
		if (addressId.value === null) {
			show.value = true;
		} else {
			show.value = false;
			uni.navigateTo({
				url: "/pages/pay/pay?cartId=" + orderVo.value.cartId +
					"&goodsId=" + orderVo.value.goodsId + "&storeId=" + orderVo.value.storeId + "&addressId=" +
					addressId.value
			})
			orderVo.value = {};
		}
	}

	//选中的地址id
	const radioChange = (evt) => {
		addressId.value = evt.detail.value;
	}
</script>

<style scoped lang="scss">
	.scroll-Y {
		height: 340px;
	}

	.item {
		padding: 10px;

		.top {
			display: flex;
			font-weight: bold;
			font-size: 34rpx;

			.phone {
				margin-left: 60rpx;
			}

			.tag {
				display: flex;
				font-weight: normal;
				align-items: center;

				text {
					display: block;
					width: 60rpx;
					height: 34rpx;
					line-height: 34rpx;
					color: #ffffff;
					font-size: 20rpx;
					border-radius: 6rpx;
					text-align: center;
					margin-left: 30rpx;
					background-color: rgb(49, 145, 253);
				}

				.red {
					background-color: red
				}
			}
		}

		.bottom {
			display: flex;
			margin-top: 20rpx;
			font-size: 28rpx;
			justify-content: space-between;
			color: #999999;
		}
	}

	.content {
		background-color: #fff;
	}

	.swipe_item {
		padding: 2px;
	}

	.card {
		padding: 13px;
		background-color: #F5F7FA;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.card:active {
		background-color: #fff;
		opacity: 1;
	}

	.grid-text_goods {
		font-size: 16px;
		color: #303133;
		font-weight: 600;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: "华文楷体";
	}

	.text {
		font-size: 13px;
		color: #909399;
		box-sizing: border-box;
		padding-top: 8px;
		margin-bottom: 20px;
	}
</style>